<template>
  <div>
    <van-nav-bar
      title="消费账单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="content">
      <div v-for="(yearGroup, year) in groupedBills" :key="year">
        <div class="year">{{ year }}年</div>
        <van-cell-group>
          <van-cell v-for="(bill, index) in yearGroup" :key="index">
            <template #title>
              <div class="date-time">
                <div class="date">{{ formatDate(bill.date) }}</div>
                <div class="time">{{ formatTime(bill.date) }}</div>
              </div>
            </template>
            <template #default>
              <div class="bill-details">
                <img class="bill-image" :src="bill.image" alt="商品图片" />
                <div class="bill-info">
                  <div class="amount">-{{ bill.amount }}</div>
                  <div class="product-name">{{ bill.productName }}</div>
                </div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { format } from 'date-fns';

const onClickLeft = () => {
  history.back();
};

const bills = ref([
  {
    date: new Date(),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '100.00',
    productName: '商品名称1'
  },
  {
    date: new Date('2023-09-15T14:30:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '200.00',
    productName: '商品名称2'
  },
  {
    date: new Date('2023-08-10T10:00:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '150.00',
    productName: '商品名称3'
  },
  {
    date: new Date('2022-07-20T09:00:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '300.00',
    productName: '商品名称4'
  },
  {
    date: new Date('2022-06-15T08:00:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '400.00',
    productName: '商品名称5'
  },
  {
    date: new Date('2021-05-10T07:00:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '500.00',
    productName: '商品名称6'
  },
  {
    date: new Date('2021-04-05T06:00:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '600.00',
    productName: '商品名称7'
  },
  {
    date: new Date('2020-03-01T05:00:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '700.00',
    productName: '商品名称8'
  },
  {
    date: new Date('2020-02-25T04:00:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '800.00',
    productName: '商品名称9'
  },
  {
    date: new Date('2019-01-20T03:00:00'),
    image: 'https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
    amount: '900.00',
    productName: '商品名称10'
  }
]);

const formatDate = (date: Date) => {
  const today = new Date();
  if (date.toDateString() === today.toDateString()) {
    return '今天';
  } else {
    return format(date, 'MM月dd日');
  }
};

const formatTime = (date: Date) => {
  return format(date, 'HH:mm');
};

const groupedBills = computed(() => {
  const groups: { [key: string]: typeof bills.value } = {};
  bills.value.forEach(bill => {
    const year = format(bill.date, 'yyyy');
    if (!groups[year]) {
      groups[year] = [];
    }
    groups[year].push(bill);
  });
  return groups;
});
</script>

<style scoped>
.content {
  width: 100%;
}

.year {
  font-size: 18px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 8px;
}

.van-cell-group {
  width: 100%;
}

.van-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.date-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 80px;
}

.date {
  font-size: 16px;
  color: #333;
  
}

.time {
  font-size: 14px;
  color: #666;
}

.bill-details {
  display: flex;
  align-items: center;

}

.bill-image {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  margin-right: 8px;
}

.bill-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.amount {
  font-size: 16px;
  color: #e60000;
}

.product-name {
  font-size: 14px;
  color: #666;
}
</style>
